<template>
  <div class="calendarBox">
    <div>
      <div class="flag">
        <div class="rect"></div>
        <span>已完成</span>
        <div class="rect rect2"></div>
        <span>未完成</span>
      </div>
    </div>
    <ui-calendar v-model="month">
      <template slot="dateCell" slot-scope="{ data }">
        <div :class="data.isSelected ? 'is-selected' : ''" @dblclick="showAdd(data)" class="dateCell">
          <div class="date">{{ data.day.substring(8, 9) == 0 ? data.day.substring(9, 10) : data.day.substring(8, 10) }}</div>
          <div class="remarkList">
            <div
              class="remark"
              :style="{ width: item.long * 100 + '%', background: getRemarkBgColor(item.type) }"
              v-for="(item, index) in getRemarkList(data.day)"
              :key="index"
            >
              <span>【{{ getTypeStr(item.type) }}】</span>
              <span>{{ item.content }}</span>
            </div>
          </div>
        </div>
      </template>
    </ui-calendar>
    <vx-dialog v-model="showDetail" title="添加日程" confirm-text="确定" @confirm="confirmDetail" :append-to-body="false">
      <ui-form label-width="200px" :model="form" class="vx-form">
        <ui-form-item label="提醒时间">
          <ui-date-picker
            v-model="form.reminderTime"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm"
          >
          </ui-date-picker>
        </ui-form-item>
        <ui-form-item label="提醒频率">
          <ui-input type="text" placeholder="请输入提醒频率" v-model="form.reminderFrequency"> </ui-input>
        </ui-form-item>
        <ui-form-item label="提醒事件">
          <ui-select placeholder="请选择" v-model="form.reminderEvent">
            <ui-option v-for="(item, index) in typeList" :key="index" :value="item.value" :label="item.label"></ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item label="日程说明">
          <ui-input type="text" placeholder="请输入日程说明" v-model="form.scheduleDescript"> </ui-input>
        </ui-form-item>
      </ui-form>
    </vx-dialog>
  </div>
</template>

<script>
import { dateUtil } from '@csii/vx-util';
export default {
  name: '',
  data() {
    return {
      remarkList: [
        {
          date: '2023-09-02',
          remark: [
            { type: 0, content: '贷款业务洽谈', beginTime: '9:00', long: 1 },
            { type: 1, content: '贷款业务洽谈', beginTime: '9:00', long: 1 },
          ],
        },
        { date: '2023-09-08', remark: [{ type: 2, content: '贷款业务洽谈', beginTime: '10:00', long: 3 }] },
      ],
      typeList: [
        { label: '拜访任务', value: 0 },
        { label: '自定义提醒', value: 1 },
        { label: '拜访计划', value: 2 },
      ],
      colorList: [
        { type: 0, value: 'red' },
        { type: 1, value: 'yellow' },
        { type: 2, value: '#ccc' },
      ],
      showDetail: false,
      form: {},
      month: '2023-09',
    };
  },
  mounted() {
    this.changeButtonAddEvent();
    // this.remarkList.splice(1, 1);
    // this.remarkList.push(...this.checkRemarkList(this.remarkList[0]));
    this.getWeekArr('2023-09-02', '2023-09-30');
  },
  methods: {
    showAdd(data) {
      this.showDetail = true;
    },
    getRemarkList(date) {
      let remarkList = [];
      this.remarkList.forEach((ele) => {
        if (date === ele.date) {
          remarkList = ele.remark;
        }
      });
      return remarkList;
    },
    getTypeStr(type) {
      let typeStr = '';
      this.typeList.forEach((ele) => {
        if (ele.value == type) {
          typeStr = ele.label;
        }
      });
      return typeStr;
    },
    getRemarkBgColor(type) {
      let color = 'red';
      this.colorList.forEach((ele) => {
        if (type === ele.type) {
          color = ele.value;
        }
      });
      return color;
    },
    confirmDetail() {},
    getData() {
      if (this.month === '2023-09') {
        this.remarkList = [
          {
            date: '2023-09-02',
            remark: [
              { type: 0, content: '贷款业务洽谈', beginTime: '9:00', long: 2 },
              { type: 1, content: '贷款业务洽谈', beginTime: '9:00', long: 1 },
            ],
          },
          { date: '2023-09-05', remark: [{ type: 2, content: '贷款业务洽谈', beginTime: '10:00', long: 3 }] },
        ];
      } else if (this.month === '2023-08') {
        this.remarkList = [
          {
            date: '2023-08-05',
            remark: [{ type: 0, content: '贷款业务洽谈', beginTime: '9:00', long: 2 }],
          },
          { date: '2023-08-10', remark: [{ type: 2, content: '贷款业务洽谈', beginTime: '10:00', long: 3 }] },
        ];
      } else if (this.month === '2023-10') {
        this.remarkList = [
          {
            date: '2023-10-01',
            remark: [{ type: 1, content: '贷款业务洽谈', beginTime: '9:00', long: 1 }],
          },
          { date: '2023-10-30', remark: [{ type: 2, content: '贷款业务洽谈', beginTime: '10:00', long: 3 }] },
        ];
      }
    },
    //日历月份切换添加事件
    changeButtonAddEvent() {
      // 点击上一个月
      const prevBtn = document.querySelector('.ui-calendar__button-group .ui-button-group>button:nth-child(1)');
      prevBtn.addEventListener('click', () => {
        let month = this.month.getMonth() + 1;
        if (month < 10) {
          month = '0' + month;
        }
        this.month = `${this.month.getFullYear()}-${month}`;
        console.log('这是上个月', this.month);

        // 请求数据
        this.getData();
      });

      // 修改今日为当月
      let spanDoc = document.querySelector('.ui-calendar__button-group .ui-button-group>button:nth-child(2)');
      spanDoc.addEventListener('click', () => {
        console.log(dateUtil.getDate('', 'YYYY-MM-DD', 'YYYY-MM-DD'));
        this.month = dateUtil.getDate('', 'YYYY-MM', 'YYYY-MM');
        // 请求数据
        this.getData();
      });

      // 点击下一个月
      const nextBtn = document.querySelector('.ui-calendar__button-group .ui-button-group>button:nth-child(3)');
      nextBtn.addEventListener('click', () => {
        let month = this.month.getMonth() + 1;
        if (month < 10) {
          month = '0' + month;
        }
        this.month = `${this.month.getFullYear()}-${month}`;
        console.log('这是下个月', this.month);

        // 请求数据
        this.getData();
      });
    },
    checkRemarkList(e) {
      let date = e;
      let newArr = [];
      let week = new Date(date.date).getDay() === 0 ? 7 : new Date(date.date).getDay();
      console.log(7 - week);
      let saveDateLong = date.remark[0].long;
      let newDate = {};
      // debugger;
      let temp = date.date;
      if (date.remark[0].long > 7 - week + 1) {
        newDate = {
          date: temp,
          remark: JSON.parse(JSON.stringify([date.remark[0]])),
        };
        newDate.remark[0].long = saveDateLong - (7 - week) - 1;
        console.log(7 - week);
        newDate.date = dateUtil.changeDate(7 - week + 1 + 'd', date.date);
        date.remark[0].long = 7 - week + 1;
        console.log(saveDateLong);
      }
      newArr.push(date);
      newArr.push(newDate);
      console.log(newArr);
      return newArr;
    },
    //计算日期在本年是第几周
    getYearWeek(endDate) {
      //本年的第一天
      let beginDate = new Date(endDate.getFullYear(), 0, 1);
      //星期从0-6,0代表星期天，6代表星期六
      let endWeek = endDate.getDay();
      if (endWeek === 0) endWeek = 7;
      let beginWeek = beginDate.getDay();
      if (beginWeek === 0) beginWeek = 7;
      //计算两个日期的天数差
      let millisDiff = endDate.getTime() - beginDate.getTime();
      let dayDiff = Math.floor((millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000);
      return Math.ceil(dayDiff / 7) + 1;
    },
    //将日程时间超出一周的按周分开
    getWeekArr(startTime, endTime) {
      let weekLength = this.getYearWeek(new Date(endTime)) - this.getYearWeek(new Date(startTime));
      // console.log(weekLength);
      let weekArr = [];
      let endWeek = new Date(endTime).getDay();
      if (endWeek === 0) endWeek = 7;
      let beginWeek = new Date(startTime).getDay();
      if (beginWeek === 0) beginWeek = 7;
      for (let i = 0; i <= weekLength; i++) {
        let data = {
          startDate: i === 0 ? startTime : dateUtil.changeDate('1d', weekArr[i - 1].endTime),
          endTime: i === weekLength ? endTime : dateUtil.changeDate(7 * (i + 1) - beginWeek + 'd', startTime),
        };
        weekArr.push(data);
      }
      console.log(weekArr);
      return weekArr;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ui-calendar-table:not(.is-range) td.next {
  display: none !important;
}
::v-deep .ui-calendar-table:not(.is-range) td.prev {
  visibility: hidden !important;
}
::v-deep .ui-calendar-day {
  padding: 0;
  height: 100px !important;
  // background: rgba(18, 119, 186, 0.167) !important;
  .dateCell {
    width: 100%;
    height: 100%;
    .date {
      text-align: right;
      padding: 0 10px;
      font-size: 16px;
    }
  }
}
.calendarBox {
  padding: 20px;
  background: #fff;
  .flag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px;
    margin-bottom: 20px;
    .rect {
      width: 40px;
      height: 20px;
      border-radius: 3px;
      background: #ccc;
      margin-right: 10px;
      margin-left: 10px;
    }
    .rect2 {
      background: yellow;
    }
  }
  .remark {
    width: 100%;
    background: red;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 2px 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
}
::v-deep .ui-calendar-table .ui-calendar-day:hover {
  background: none;
}
::v-deep .ui-calendar-table td.is-selected {
  background: transparent !important;
}
::v-deep .ui-calendar-table thead th:before {
  content: '星期';
}
::v-deep .ui-calendar-table thead th {
  text-align: center;
  // background: blue;
  // color: #fff;
}
::v-deep .ui-calendar__title {
  font-size: 16px !important;
}
</style>